'use strict';
import React, {Component, PropTypes} from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import { message,Collapse,Checkbox,Select,Tabs,Input, Alert,Row, Col, Form , Radio, Button, Upload, Icon } from 'antd';
const Panel = Collapse.Panel;
const Option = Select.Option;

import PhonePreview from './PhonePreview.jsx';
import Api from '../../../../config/api';
import Request from '../../utils/request';
import { setRow,addModule,delModule,setDetail } from '../../reducers/page/actions';
import { setLoading } from '../../reducers/common/actions';

import TcpPage from '../../../../components/tcp/Page.jsx';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;


class ComponentBox extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectIndex:null,
            selectType:0,
        };
    }
    render() {
        let {hash} = this.props.detail;
        if(!hash) return null;
        let {deployServerDomain,deployFile} = this.props.app.config;
        let url = `${deployServerDomain}/${deployFile}#/page/${hash}`;
        let _url = encodeURIComponent(url)
        let qr_url = `${deployServerDomain}/tool/qrcode.php?content=${_url}`;
        let items = this.props.detail.items;
        let pageInfo = this.props.detail;

        //pageInfo = pageInfo.set("items",items.asMutable());

        return (
            <Row gutter={16}>
                <Col span={10}>
                    <Form horizontal >
                        <FormItem
                            label="二维码"
                            labelCol={{ span: 5 }}
                            wrapperCol={{ span: 19 }}>
                            <Input value={url}/>
                            {
                                qr_url ?<p><img src={qr_url} width="80" height="80" alt=""/></p>:null
                            }
                            <div>
                                <a href={`#/mobile/page/${hash}`} target="_blank">预览</a>
                            </div>
                        </FormItem>
                        <FormItem
                            label="页面标题"
                            labelCol={{ span: 6 }}
                            wrapperCol={{ span: 18 }}>
                            <Input
                                value={this.props.detail.title}
                                onChange={::this.onChangeValue.bind(this,"title")}/>
                        </FormItem>
                        <FormItem
                            label="状态"
                            labelCol={{ span: 6 }}
                            wrapperCol={{ span: 18 }}>
                            <RadioGroup
                                onChange={::this.onChangeValue.bind(this,'status')}
                                value={parseInt(this.props.detail.status)}>
                                <Radio key="b" value={1}> 上架 </Radio>
                                <Radio key="a" value={0}> 下架 </Radio>
                            </RadioGroup>
                        </FormItem>
                        <FormItem
                            label="模块"
                            labelCol={{ span: 6 }}
                            wrapperCol={{ span: 18 }}>
                            <Select id="select"
                                style={{width:80,marginRight:16}}
                                onChange={this.onChangeType.bind(this)}
                                value={this.state.selectType+""}>
                                {
                                    this.props.TYPES.map((type,i)=>{
                                        return (
                                            <Select.Option key={i+1} value={i+""}>{type}</Select.Option>
                                        )
                                    })
                                }
                            </Select>
                            <Button onClick={this.onAddModule.bind(this)}>新加</Button> &nbsp;&nbsp;

                            <Button onClick={this.onSortModule.bind(this)}>排序</Button>
                        </FormItem>
                        {
                            items.length > 0 ?
                                <Collapse accordion>
                                    {
                                        items.map((item,i)=>{
                                            let {status,order} = item;
                                            let title = this.props.TYPES[item.type] +" "+ (i+1)
                                            return (
                                                <Panel header={title} key={(i+1)+""}>
                                                    <FormItem
                                                        label="显示"
                                                        labelCol={{ span: 6 }}
                                                        wrapperCol={{ span: 18 }}>
                                                        <Checkbox
                                                            checked={ status == 1}
                                                            onChange={::this.onChangeModuleValue.bind(this,i,'status')}/>
                                                    </FormItem>
                                                    <FormItem
                                                        label="排序"
                                                        labelCol={{ span: 6 }}
                                                        wrapperCol={{ span: 18 }}>
                                                        <Input
                                                            value={order}
                                                            onChange={::this.onChangeModuleValue.bind(this,i,"order")}/>
                                                    </FormItem>
                                                    <FormItem
                                                        label="排序"
                                                        labelCol={{ span: 6 }}
                                                        wrapperCol={{ span: 18 }}>
                                                        <Button onClick={this.delModule.bind(this,i)}>删除</Button>
                                                    </FormItem>
                                                </Panel>
                                            )
                                        })
                                    }
                                </Collapse>:null
                        }

                    </Form>
                </Col>
                <Col span={14}>
                    <PhonePreview>
                        <TcpPage
                            fromBackend={true}
                            pageInfo={pageInfo}
                            deviceWidth={this.props.common.deviceWidth}
                        />
                    </PhonePreview>
                </Col>
            </Row>
        );
    }
    onSortModule(){
        let {detail} = this.props;
        let items = detail.items.asMutable();
        items.sort(function(a,b){
            return a.order - b.order;
        });
        detail = detail.set("items",items);
        this.props.setDetail(detail);
    }
    delModule(index){
        if(!confirm("确定要删除么?")) return;
        this.props.delModule(index)
    }
    onAddModule(){
        this.props.addModule(this.state.selectType)
    }
    onChangeType(selectType){
        this.setState({selectType});
    }
    onChangeModuleValue(i,key,e){
        let {detail} = this.props;
        let value = e.target.value;
        if(key == "status"){
            value = e.target.checked;
            value = value ? 1 :0;
        }
        detail = detail.setIn(["items",i,key], value);
        this.props.setDetail(detail);
    }
    onChangeValue(key,e){
        let {detail} = this.props;
        let value = e.target.value;
        detail = detail.set(key, value);
        //console.log(index,row);
        this.props.setDetail(detail);
    }

}

export default connect(
    state =>{
        return {
            detail:state.page.detail,
            app:state.app,
            TYPES:state.page.TYPES,
            row:state.page.row,
            common:state.common
        }
    },
    dispatch =>{
        return {
            setDetail: (row)=>dispatch(setDetail(row)),
            setRow: (row)=>dispatch(setRow(row)),
            setLoading: (isLoading)=>dispatch(setLoading(isLoading)),
            addModule:(index)=>dispatch(addModule(index)),
            delModule:(index)=>dispatch(delModule(index))
        };
    }
)(ComponentBox);

